<template>
  <div class="container">
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :success-text="successText"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id" :title="item.name">{{
          item.name
        }}</van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  props: ['pullDataLists'],
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      successText: '',
      isloaded: false
    }
  },
  methods: {
    onLoad () {
      setTimeout(() => {
        this.$emit('onLoad')
        if (this.pullDataLists.length) {
          this.list = [...this.list, ...this.pullDataLists]
        } else {
          this.finished = true
        }
        this.loading = false
      }, 1000)
    },
    onRefresh () {
      this.$emit('onLoad')
      if (this.pullDataLists.length) {
        this.list = [...this.list, ...this.pullDataLists]
        this.successText = `已成功加载了${this.pullDataLists.length}条数据`
      } else {
        this.finished = true
        this.successText = '已全部加载完毕,暂无新数据~'
      }
      this.refreshing = false
      this.flag = false
    }
  },
  watch: {
    pullDataLists: {
      handler (newVal, oldVal) {
        this.pullDataLists = newVal
        // if (!this.list.length) this.list = this.pullDataLists
      },
      immediate: true
    }
  }
}
</script>
<style lang="less">
.container {
  .van-cell {
    margin-top: 10px;
  }
}
</style>
